<template>
<div>
  <head title="Getting money"></head>
  <div class="wrapImg">
    <image class="bgcIMg" src="root:img/invite/invite.png" alt />
    <div class="mainCon">
      <div class="qcodeImg">
         <!-- <image class="qcodeImgs" resize="contain" :src="url" alt /> -->

        <ImgAuto :width="600" :imgSrc="url"/>

      </div>
      <text class="shareBtn" @click="share">Share QR code</text>
    </div>
  </div>
</div>
</template>

<script>

import asCore from "../../mixin/core";
export default {
  data() {
    return {
      username:"",
      url: "root:img/invite/invite.png"
    };
  },
  created() {
    var pref = weex.requireModule("storage");
    pref.getItem("userQC", event => {
      this.url = event.data;
    });
     asCore.getContext(context => {
     
      this.username = context.nickname;
    });
  },
  methods: {
    share() {
      if (this.isWeb) {
        this.alert("Please download QR code and share it with friends", () => {
          let image = new Image();
          // 解决跨域 Canvas 污染问题
          image.setAttribute("crossOrigin", "anonymous");
          image.onload = function() {
            let canvas = document.createElement("canvas");
            canvas.width = image.width;
            canvas.height = image.height;
            let context = canvas.getContext("2d");
            context.drawImage(image, 0, 0, image.width, image.height);
            let url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
            let a = document.createElement("a"); // 生成一个a元素
            let event = new MouseEvent("click"); // 创建一个单击事件
            a.download = "qcode"; // 设置图片名称
            a.href = url; // 将生成的URL设置为a.href属性
            a.dispatchEvent(event); // 触发a的单击事件
          };
          image.src = this.url;
        });
        return false;
      }
      let sys = weex.requireModule("sysShare");
      sys.share({
        type: "image",
        image: this.url
      });
    }
  }
};
</script> 
<style>
.wrapImg {
  flex: 1;
  background-color: #c70001;
  position: relative;
}
.mainCon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.bgcIMg {
  height: 1206px;
  width: 750px;
}
.scan {
  width: 49px;
  height: 51px;
}
.scanTips{
  font-size:28px;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(153,153,153,1);
padding-left: 30px;
}
.btmBar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 600px;
  height: 111px;
  background-color: rgba(235, 235, 235, 1);
  flex-direction: row;
  align-items: center;
  padding-left: 40px;
}
.qcodeImg {
  width: 600px;
  
  margin-top: 50px;
  margin-bottom: 50px;
  margin-left: 75px;
  background-color: #fff;
  align-items: center;
}
.qcodeImgs {
  width: 600px; 
}
.shareBtn {
  margin-top: 50px;
  width: 584px;
  height: 112px;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 193, 50, 1) 0%,
    rgba(254, 134, 1, 1) 100%
  );
  box-shadow: 0px 10px 0px 0px rgba(237, 114, 25, 1);
  border-radius: 69px;
  margin-left: 83px;
  font-size: 34px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  line-height: 112px;
  text-align: center;
}
.shareBtn:active {
  background-image: rgba(255, 193, 50, 1);
  background-color: rgba(255, 193, 50, 1);
  box-shadow: 0px 10px 0px 0px rgba(255, 193, 50, 1);
}
.username{
  font-size:30px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
line-height:42px;
margin-top: 20px;
}
.logoImg {
  width: 65px;
  height: 56px;
  margin-top: 40px;
}
</style>